<template>
	<view class="balancePage">
		<!-- #ifndef H5 -->
		<Nav></Nav>
		<!-- #endif -->
		<view class="balancbox">
			<view class="balanc_text">
				<view class="balanc_t">我的余额</view>
				<view class="balanc_mony">
					￥
					<text>{{ num }}</text>
				</view>
			</view>
		</view>
		<view class="tab">
			<u-tabs :list="list2" @click="openpage"></u-tabs>
		</view>
		<view class="" v-show="red">
			<view class="grid">
				<u-grid :border="false" col="3">
					<u-grid-item
						v-for="(listItem, listIndex) in list"
						:key="listIndex"
						:class="{'u-grid-item1': add_class == listIndex}"
						@click="click"
					>
						<u-icon
							:customStyle="{paddingTop: 20 + 'rpx'}"
							:name="listItem.name"
							:size="20"
						></u-icon>
						<text class="grid-text">{{ listItem.title }}</text>
					</u-grid-item>
				</u-grid>
				<u-toast ref="uToast" />
			</view>
		</view>
		<view class="" v-show="!red">
			<template>
				<input
					class="inp"
					placeholder="$0.00"
					border="bottom"
					clearable
				/>
			</template>
			<view class="tishi">提示： 当前佣金为￥0.00</view>
		</view>
		<view class="notice">
			<view class="ps">注意事项:</view>
			<view class="">
				1、充值金额最少为1元
				<view class="">2、充值后只能用于消费</view>
				<view class="">3、提现金额需要手续费3%</view>
				<view class="">4、提现到账需要2~3天时间</view>
			</view>
		</view>
		<view class="btnclass" v-show="red" @click="setRecharge">立即充值</view>
		<view class="btnclass" v-show="!red">立即转入</view>
	</view>
</template>

<script>
import {getlance, recharge} from "../../../network/user.js";
import Nav from "@/components/top_nav.vue";
export default {
	data() {
		return {
			// onpageshow:true
			add_class: "",
			red: true,
			list2: [
				{
					name: "账户充值"
				},
				{
					name: "佣金转入"
				}
			],
			list: [
				{
					name: "1元",
					title: "赠送：1元"
				},
				{
					name: "30.00元",
					title: "赠送：3.00元"
				},
				{
					name: "10元",
					title: "赠送：1元"
				},
				{
					name: "50.00元",
					title: "赠送：5.00元"
				},
				{
					name: "100元",
					title: "赠送：10元"
				},
				{
					name: "200元",
					title: "赠送：20元"
				},
				{
					name: "300元",
					title: "赠送：30元"
				},
				{
					name: "500.00元",
					title: "赠送：50.00元"
				},
				{
					name: "800.00元",
					title: "赠送：100.00元"
				},
				{
					name: "其他"
				}
			],
			num: ""
		};
	},
	components: {
		Nav
	},
	methods: {
		openpage() {
			this.red = !this.red;
		},
		async getnum() {
			let {data} = await getlance();
			console.log(data);
			this.num = data.nowMoney;
		},
		click(name) {
			// this.red = !this.red
			console.log(name);
			this.add_class = name;
		},
		async setRecharge() {
			let data = await recharge();
			console.log(data);
		}
	},
	created() {
		this.getnum();
	}
};
</script>

<style lang="scss">
.btnclass {
	width: 90%;
	height: 80rpx;
	background: linear-gradient(to right, #ff7830, red);
	border-radius: 50rpx;
	// border: 1px solid black;
	margin: auto;
	margin-top: 50rpx;
	text-align: center;
	line-height: 80rpx;
	color: white;
}
.inp {
	width: 100%;
	height: 150rpx;
	border-bottom: 1px dashed #ebebeb;
	padding-left: 40%;
	font-size: 50rpx;
}
.tishi {
	margin-left: 40rpx;
	margin-top: 20rpx;
}
.uni-input-input {
	height: 150rpx !important;
}
.notice {
	margin-left: 40rpx;
	margin-top: 30rpx;
	view {
		margin-top: 10rpx;
	}
	.ps {
		font-weight: bolder;
		margin-bottom: 10rpx;
	}
}
.grid {
	margin-left: 15rpx;
	.grid-text {
		font-size: 20rpx;
	}
}
.u-grid-item {
	border: 1px solid black;
	background-color: #f4f4f4 !important;
	border-radius: 15rpx;
	// margin: 5rpx;
	width: 220rpx !important;
	margin: 10rpx;
	padding: 10rpx;
}
.u-grid-item1 {
	color: #fff !important;
	background-color: red !important;
}
.tab {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	// margin-left: 100rpx;
}
.balanc_text {
	.balanc_t {
		color: #f5c2cc;
		font-size: 28rpx;
		text-align: center;
		margin-top: 50rpx;
	}
	background-color: red;
	height: 360rpx;
	overflow: hidden;
	.balanc_mony {
		text-align: center;
		margin-top: 50rpx;
		color: white;
		> text {
			font-size: 60rpx;
			font-weight: bolder;
		}
	}
}
</style>
